<template>
  <div class="gasoline">
    <!--v-if="user&&(user.vipStage==2||user.vipStage==4)"-->
    <header-tab></header-tab>
    <div class="content">
      <button v-if="user.vipStage == 5" class="button_add" @click="gasolineUserSave()">创建自属原料库</button>
      <span class="h2">自属汽油原料库如下：</span>
      <button @click="button_show()" v-if="user.vipStage != 5" class="button_show">
        查看全国范围所有汽油原料(VIP1可显示原料卖家详细信息)
      </button>

      <table>
        <thead>
        <tr>
          <th v-for="field in fields" :key="field.name" :style="{wordBreak: field.nowrap ? 'keep-all' : 'normal'}">
            {{ field.label }}
          </th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in data.list" :key="item.id+index">
          <td v-for="field in fields" :key="field.name" style="padding:0 2px;">
            <input
                type="text"
                :style="{
              width:field.name=='phone'?'75px':field.name=='bussiness'?'75px':field.name=='gasolineName'?'75px':'40px',
            }"
                :class="field.name"
                v-if="field.editable"
                v-model="item[field.name]"
                :placeholder="field.label"
            />
            <select v-else-if="field.selected" v-model="item[field.name]" style="width: 80px">
              <option disabled value="">请选择</option>
              <option v-for="option in types" :key="option.value" :value="option.value">{{ option.label }}</option>
            </select>
            <select v-else-if="field.selected2" v-model="item[field.name]" style="width: 85px">
              <option disabled value="">请选择</option>
              <option v-for="option in enterNames" :key="option.value" :value="option.value">{{ option.label }}</option>
            </select>
            <select v-else-if="field.selected3" v-model="item[field.name]" style="width: 65px" @change="e=>getCitiesList({provinceid:e.target.value})"><!--@change="-->
              <option disabled value="">请选择省</option>
              <option v-for="option in provinces" :key="option.pid" :value="option.provinceid">{{ option.province }}</option>
            </select>
            <select v-else-if="field.selected4" v-model="item[field.name]" style="width: 85px">
              <option disabled value="">请选择市</option>
              <option v-for="option in cities " :key="option.cid" :value="option.id">{{ option.city }}</option>
            </select>
            <span v-else>{{ item[field.name] }}</span>
          </td>
          <td style="display: flex;width: 50px;font-size: 10px;padding:0 2px;vertical-align: center">
            <el-button type="text" size="mini" @click="updateRow(item)">保存</el-button>
            <el-button style="margin-left: 2px" type="text" size="mini" @click="gasolineOneUpdateByNumber(item)">清除
            </el-button>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
    <div class="footer">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="data.pageNum"
          :page-sizes="[30]"
          :page-size="data.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="data.total">
      </el-pagination>
    </div>
  </div>
</template>


<script default>
import {
  gasolineOneFindAll,
  gasolineOneSave,
  gasolineUpdate,
  gasolineOneUpdateByNumber,
  provincesList,
  citiesList,
  gasolineUserSave
} from '@/api/gasoline'
import HeaderTab from "@/components/HeaderTab"
import {getInfo} from "@/api/login";

export default {
  name: 'gasoline',
  components: {
    HeaderTab
  },
  data() {
    //todo 原料卖家，原料买家
    return {
      selectProvince: '',
      provinces: [],
      cities: [],
      data: [],
      types: [
        {value: '厂家可卖', label: '厂家可卖'},
        {value: '厂家不卖', label: '厂家不卖'},
        {value: '贸易商', label: '贸易商'}
      ],
      enterNames: [
        {value: '原料卖家', label: '原料卖家'},
        {value: '原料买家', label: '原料买家'}
      ],
      fields: [
        {name: 'countId', label: '序号', editable: false, nowrap: 1},
        {name: 'pid', label: '原料来源(省)', selected3: true},
        {name: 'cid', label: '原料来源(市)', selected4: true},
        {name: 'bussiness', label: '原料卖家', editable: true},
        {name: 'type', label: '卖家属性', selected: true, options: true},
        {name: 'gasolineName', label: '原料名称', editable: true},
        {name: 'number', label: '可供量', editable: true},
        {name: 'price', label: '价格', editable: true},
        {name: 'density', label: '密度', editable: true},
        {name: 'studyOctane', label: '研究法辛烷值', editable: true},
        {name: 'motorOctane', label: '马达法辛烷值', editable: true},
        {name: 'olefins', label: '烯烃', editable: true},
        {name: 'aromatic', label: '芳烃', editable: true},
        {name: 'sulphur', label: '硫含量', editable: true},
        {name: 'steams', label: '蒸汽压', editable: true},
        {name: 'oxidation', label: '氧含量', editable: true},
        {name: 'benzene', label: '苯', editable: true},
        {name: 'littleRange', label: '10%馏程', editable: true},
        {name: 'halfRange', label: '50%馏程', editable: true},
        {name: 'mostRange', label: '90%馏程', editable: true},
        {name: 'allRange', label: '终馏点', editable: true},
        {name: 'enterName', label: '数据来源', selected2: true},
        {name: 'phone', label: '联系方式', editable: true},
        {name: 'updateDate', label: '更新时间', editable: false},
      ],
      item: {
        pageNum: 1,
        pageSize: 30,
        total: 0,
      },
      showButton: null,
      user: {},
    }
  }
  ,
  created() {
    this.fechtData()
    this.gasolineOneSave()
    this.showUser()
    this.provincesList()
    this.getCitiesList()
  }
  ,
  methods: {
    button_show() {
      getInfo().then((res) => {
        this.user = res.data.user
        if (this.user.vipStage == "VIP1会员") {
          this.$router.push({path: '/gasolineVip1'})
        }
        if (this.user.vipStage == "管理员") {
          this.$router.push({path: '/gasolineAll'})
        }
        if (this.user.vipStage == "免费会员") {
          this.$router.push({path: '/gasolineUser'})
        }
      })
    },
    showUser() {
      getInfo().then((res) => {
        this.user = res.data.user
      })

    },
    loading() {
      alert("敬请期待")
    }
    ,
    handleSizeChange(val) {
      this.item.pageSize = val;
      this.fechtData();
    }
    ,
    handleCurrentChange(val) {
      this.item.pageNum = val;
      this.fechtData();
    }
    ,
    fechtData() {
      gasolineOneFindAll(this.item).then((res) => {
        this.data = res.data.gasolineOnePageInfo;
      }).catch((error) => {
        alert("请检查网络")
      })
    }
    ,
    gasolineOneSave() {
      gasolineOneSave(this.item).then((res) => {
        this.fechtData();
      }).catch((error) => {
        alert("请检查网络")
      })
    },
    gasolineUserSave() {
      gasolineUserSave(this.item).then(res => {
        this.fechtData();
      }).catch((error) => {
        alert("请检查网络")
      })

    },
    updateRow(row) {
      let data = {
        id: row.id,
        area: row.area,
        pid: row.pid,
        cid: row.cid,
        bussiness: row.bussiness,
        gasolineName: row.gasolineName,
        number: row.number,
        type: row.type,
        price: row.price,
        density: row.density,
        studyOctane: row.studyOctane,
        motorOctane: row.motorOctane,
        olefins: row.olefins,
        aromatic: row.aromatic,
        sulphur: row.sulphur,
        steams: row.steams,
        oxidation: row.oxidation,
        benzene: row.benzene,
        littleRange: row.littleRange,
        halfRange: row.halfRange,
        mostRange: row.mostRange,
        allRange: row.allRange,
        enterName: row.enterName,
        phone: row.phone
      }
      gasolineUpdate(data).then((res) => {
        this.fechtData();
        this.$message(res.message)
      }).catch((error) => {
        alert("请检查网络")
      })
    }
    ,
    gasolineOneUpdateByNumber(row) {
      let data = {
        id: row.id,
        price: row.price,
        density: row.density,
        studyOctane: row.studyOctane,
        motorOctane: row.motorOctane,
        olefins: row.olefins,
        aromatic: row.aromatic,
        sulphur: row.sulphur,
        steams: row.steams,
        oxidation: row.oxidation,
        benzene: row.benzene,
        littleRange: row.littleRange,
        halfRange: row.halfRange,
        mostRange: row.mostRange,
        allRange: row.allRange,
        carCount: row.carCount,
        tonCount: row.tonCount,
        lowFomula: row.lowFomula,
        highFomula: row.highFomula,
        expFomula: row.expFomula,
      }
      gasolineOneUpdateByNumber(data).then((res) => {
        this.$message(res.message)
        this.fechtData();
      }).catch(error => {
        alert("请检查网络")
      })
    },

    provincesList() {
      provincesList().then(res => {
        this.provinces = res.data.provinceList
      })
    },
    getCitiesList(row) {
      if (row){
        citiesList({
          provinceid:row.provinceid
        }).then(res => {
          this.cities = res.data.citiesList
        })
      }
    }
  }
}
</script>
<style scoped>

.gasoline {
  width: 100%;
  overflow: hidden;
}

.content {
  width: 100%;
  margin-top: 10px;
  overflow: auto;
}

.h2 {
  display: block;
  width: 160px;
  height: 35px;
  line-height: 35px;
  font-size: 12px;
  float: left;
  margin-top: 2px;
}

.button_add {
  background-color: #409EFF;
  border: none;
  width: 120px;
  height: 25px;
  color: white;
  margin-top: 5px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}

.button_show {
  //background-color: #EBB563;
  border: #90939C 1px solid;
  width: 400px; /*250px*/
  height: 25px;
  margin-top: 5px;
  margin-bottom: 10px;
  margin-left: 15px;
  border-radius: 5px;
  float: left;
  //color: white;
}

button:focus {
  outline: none;
  box-shadow: none;
}

.content table {
  width: 100%;
  border-collapse: collapse;
  overflow: auto;
}

.content table tr {
  width: 10px;
}

.content table th, table td {
  height: 20px;
  border: 1px solid #e6e6e6;
  padding: 0px;
  text-align: center;
  font-size: 12px;
  color: #000000;
  font-weight: normal;
}

.content table input {
  width: 55px;
  text-align: center;
  border: #e9e9e9 1px solid;
}

.content table button {
  border: none;
  background-color: white;
}


</style>
